<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>课堂签到</title>
    {% load static %}
    <style>
        .input {
            /*border: 0.1rem solid red;*/
            height: 20rem;
            border-radius: 5%;
            position: relative;
            top: -6rem;
            z-index: 100;
            background: white;
            margin-left: 2rem;
            margin-right: 2rem;
            padding-top: 1.5rem;
        }
        .bg-img {
          background-image: url("{% static './image/bg.png' %}");
          background-size: cover;
          background-repeat: no-repeat;
          background-position: center;
        }


    </style>

<!--  &lt;!&ndash; Import style &ndash;&gt;-->
<!--  <link rel="stylesheet" href="//unpkg.com/element-plus/dist/index.css" />-->
<!--  &lt;!&ndash; Import Vue 3 &ndash;&gt;-->
<!--  <script src="//unpkg.com/vue@3"></script>-->
<!--  &lt;!&ndash; Import component library &ndash;&gt;-->
<!--  <script src="//unpkg.com/element-plus"></script>-->
    <!--    以下是weui的引入 -->
    <link rel="stylesheet" href="https://weui.io/style/weui.css" />
    <link rel="stylesheet" href="https://weui.io/example.css" />
    <script src="https://weui.io/zepto.min.js"></script>
    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.17/weui.min.js"></script>
    <script src="https://weui.io/example.js"></script>
    <script src="https://weui.io/wah.js"></script>
<!--    引入jquery-->
    <script src="https://code.jquery.com/jquery-3.7.1.js"></script>

    <meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no,viewport-fit=cover">
</head>
<body style="text-align: center;">
    <div style="height: 18rem;" class="bg-img"></div>
    <div class="input">
        <div>
            <span style="font-size: 1.3rem;">欢迎来到大数据扫码签到</span>
        </div>

        <div class="weui-form__control-area">
        <div class="weui-cells__group weui-cells__group_form">
          <div class="weui-cells__title">填写信息</div>
          <div class="weui-cells">
            <label for="js_input1" class="weui-cell weui-cell_active">
              <div class="weui-cell__hd"><span class="weui-label">学生姓名</span></div>
              <div class="weui-cell__bd">
                  <input id="js_input1" class="weui-input" placeholder="真实姓名">
              </div>
            </label>
            <div role="button" aria-haspopup="listbox" class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after" wah-hotarea="touchend">
              <div class="weui-cell__hd"><label class="weui-label">所在班级</label></div>
              <div class="weui-cell__bd" id="showPicker"><div class="weui-select">选择专业</div></div>
            </div>
            <div role="button" aria-haspopup="listbox" class="weui-cell weui-cell_active weui-cell_select weui-cell_select-after" wah-hotarea="touchend">
              <div class="weui-cell__hd"><label class="weui-label">签到课程</label></div>
              <div class="weui-cell__bd" id="showPicker_class"><div class="weui-select">选择课程</div></div>
            </div>
          </div>
        </div>
      </div>

<!--         <p id="demo">点击这个按钮，获得您的坐标：</p>-->
<!--         <button onclick="getLocation()">试一下</button>-->

      <div style="margin-top: 5rem">
          <a href="#" role="button" class="weui-btn weui-btn_primary" id="redirect_scan">扫码签到</a>
<!--          <a href="{% url 'user_scan:index' %}" role="button" class="weui-btn weui-btn_primary">扫码签到</a>-->
      </div>
    </div>
</body>
<footer style="margin-top: 5rem">
    <div style="font-size: 0.5rem">Copyright © 2024 22大数据软件开发. All rights reserved.</div>
</footer>
<script type="text/javascript" class="form_select_primary js_show">
    $('#showPicker').on('click', function () {
        weui.picker([{
            label: '24电商综合一班',
            value: 0
        }, {
            label: '22大数据软件开发',
            value: 1
        }, {
            label: '23网络技术',
            value: 2
        },
        {
            label: '21幼师',
            value: 3
        }
        ], {
            onChange: function (result) {
                console.log(result);
            },
            onConfirm: function (result) {
                console.log(result);
                $('#showPicker').text(result[0].label);
            },
            title: '单列选择器'
        });
    });
    $('#showPicker_class').on('click', function () {
        weui.picker([{
            label: '英语',
            value: 0
        }, {
            label: '编程思维',
            value: 1
        }, {
            label: '幼儿美术',
            value: 2
        }, {
            label: '幼儿折纸',
            value: 3
        }, {
            label: '钢琴',
            value: 4
        }, {
            label: '形体舞蹈',
            value: 5
        }, {
            label: '钢琴练习',
            value: 6
        }
        ], {
            onChange: function (result) {
                console.log(result);
            },
            onConfirm: function (result) {
                console.log(result);
                $('#showPicker_class').text(result[0].label);
            },
            title: '单列选择器'
        });
    });
    $('#redirect_scan').on('click',function () {
        // 校验姓名
        var name = $('#js_input1').val()
        if(name.length === 0){
            alert('学生姓名不能为空！')
            return false
        }
        // 班级的选择
        var class_name = $('#showPicker').text();
        if(class_name == '选择专业'){
             alert('请选择专业！')
             return false
        }
        // 签到课程的选择
        var course_name = $('#showPicker_class').text();
        if(course_name == '选择课程'){
             alert('请选择课程！')
             return false
        }

        var lat = 0
        var long = 0
        getLocation();
        function getLocation() {
            if (navigator.geolocation) {
                navigator.geolocation.getCurrentPosition(function (position) {
                    lat = position.coords.latitude;
                    long = position.coords.longitude;
                    window.location.href = "{% url 'user_scan:index' %}" + "?name="+ name + "&class_name="+ class_name
                    + "&course_name="+ course_name + "&lat="+ lat + "&long="+ long
                    ;
                });
            }else{
                // 怎么通过链接把数据带过去？
                window.location.href = "{% url 'user_scan:index' %}" + "?name="+ name + "&class_name="+ class_name
                + "&course_name="+ course_name + "&lat="+ lat + "&long="+ long
                ;
            }
        }
    })
</script>

</html>